import React, { Component } from 'react';

// 导入样式表
import './List.scss'
// 导入图片
import pic1 from '../imgs/hufu.png'
import pic2 from '../imgs/caizhuang.png'
import pic3 from '../imgs/xiangfen.png'
import pic4 from '../imgs/jinkoujiu.png'
import pic5 from '../imgs/guochan.jpg'
import pic6 from '../imgs/sheping.png'
import pic7 from '../imgs/shipin.png'
import pic8 from '../imgs/muying.png'
import pic9 from '../imgs/zhibo.png'
import pic10 from '../imgs/temai.png'

class List extends Component {
    constructor(props) {
        super(props);
        this.state = { //定义组件状态
            arr: [
                { name: '护肤', pic: pic1 },
                { name: '彩妆', pic: pic2 },
                { name: '香氛', pic: pic3 },
                { name: '进口酒', pic: pic4 },
                { name: '国产酒', pic: pic5 },
                { name: '精品奢品', pic: pic6 },
                { name: '食品百货', pic: pic7 },
                { name: '母婴专区', pic: pic8 },
                { name: '直播专区', pic: pic9 },
                { name: '特卖专场', pic: pic10 },
            ]
        }
    }
    render() {
        return (
            <div className='list'>
                {
                    //列表渲染，使用js中的map函数
                    this.state.arr.map((item) => {
                        return (
                            <div className="cate">
                                <img src={item.pic} alt="" />
                                <div className="name">{item.name}</div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default List;